<template>
  <div id="home">
    <navbar class="home-nav">
      <div slot="center">购物街</div>
    </navbar>
    <tabcontrol
      class="tab-control"
      :titles="titles"
      @homeclick="homeSSclick"
      v-show="homeSS"
      ref="tabcrol2"
    ></tabcontrol>

    <betterscroll @hiddimg="hiddimg" class="content" ref="betscroll" @pullingUp="pullingUp">
      <homeswiper :banners="banners" @swiperover="swiperover"></homeswiper>
      <homesiiperch :recommends="recommends"></homesiiperch>
      <feature></feature>
      <tabcontrol class="tab-control" :titles="titles" @homeclick="homeSSclick" ref="tabcrol"></tabcontrol>
      <!---这个是具体的商品列表-->
      <goodslist :goodslist="goods[curry].list"></goodslist>
    </betterscroll>
    <backtop v-show="arimg" @backtopclick="backtopclick"></backtop>
  </div>
</template>

<script>
import navbar from "components/common/navbar/navbar";
import homeswiper from "views/home/homechild/homeswiper";
import homesiiperch from "views/home/homechild/homesiiperch";
import { homrequires, homrshow } from "network/home";
import feature from "views/home/homechild/feature";
import tabcontrol from "components/common/tabcontorl/tabcontrol";
import goodslist from "components/conent/goods/goodslist";
import betterscroll from "components/common/betterscroll/betterscroll";

import { itemListenerMixin, showupimg } from "common/mixin";
export default {
  name: "home",
  components: {
    navbar,
    homeswiper,
    homesiiperch,
    feature,
    tabcontrol,
    goodslist,
    betterscroll
  },
  mixins: [itemListenerMixin, showupimg],
  data() {
    return {
      banners: [],
      recommends: [],
      titles: ["流行", "新款", "预选"],
      goods: {
        pop: {
          page: 1,
          list: []
        },
        new: {
          page: 1,
          list: []
        },
        sell: {
          page: 1,
          list: []
        }
      },
      curry: "pop",
      indexmemo: 0
    };
  },
  created() {
    this.homrequires();
    this.homrshow("pop");
    this.homrshow("new");
    this.homrshow("sell");
  },
  activated() {
    //这个是活跃的时候
    this.$refs.betscroll.batterscrollcli(0, this.indexmemo, 300);
    //刷新一次
    this.$refs.betscroll.refreshimg();
  },
  deactivated() {
    //这个方法是不活跃的时候
    this.indexmemo = this.$refs.betscroll.scroll.y;
  },
  mounted() {
    //获取到这个监听的事件
    console.log(22222222);
  },
  methods: {
    homrequires() {
      homrequires().then(res => {
        //console.log(res)
        //拿到请求的数据
        this.banners = res.data.data.banner.list;
        this.recommends = res.data.data.recommend.list;
      });
    }, //异步请求首页数据
    homrshow(types) {
      //每次调用这个方法的时候都让页数加一
      const pages = this.goods[types].page;
      homrshow(pages, types).then(res => {
        console.log(res);
        this.goods[types].list.push(...res.data.data.list);
        this.goods[types].page += 1;
      });
    }, //专门处理点击控制的问题
    homeSSclick(index) {
      switch (index) {
        case 0:
          this.curry = "pop";
          // console.log(this.curry)
          break;
        case 1:
          this.curry = "new";
          //console.log(this.curry)
          break;
        case 2:
          this.curry = "sell";
          // console.log(this.curry)
          break;
      }
      this.$refs.tabcrol2.currentindex = index;
      this.$refs.tabcrol.currentindex = index;
    },
    //下拉刷新方法
    pullingUp() {
      //调用异步请求数据
      this.homrshow(this.curry);
      //请求完数据之后进行 刷新才能继续执行下一次刷新，必须执行这个方法
      this.$refs.betscroll.finishPullUp();
    }, //防抖动函数，防抖动的意思就是说异步请求数据的时候
    //数据请求的太频繁我们要等上一段时间来判断有没有新的请求，如果有新的请求那么就把上一次请求给清空，给转换到这一次请求直到最后一次请i去
    // debounce(func, dalay) {
    //   let time = null;
    //   return function(...args) {
    //     if (time) {
    //       clearTimeout(time);
    //       time = setTimeout(() => {
    //         console.log("我已经被刷新");
    //         func.apply(this, args);
    //       }, dalay);
    //     }
    //   };
    // }, 
    hiddimg(prication) {
            //console.log(prication)
            this.$refs.betscroll.count = 3;
            this.arimg = prication.y < -1000;
            //如果主页的滚动相同的
            if (this.tabcrolnum < -prication.y) {
                this.homeSS = true;
            } else {
                this.homeSS = false;
            }
        },
    swiperover() {
      //监控首页四张轮播图轮播完成
      this.tabcrolnum = this.$refs.tabcrol.$el.offsetTop;
    }
  }
};
</script>

<style>
#home {
  padding-top: 44px;
}

.home-nav {
  background-color: var(--color-tint);
  color: white;
  position: fixed;
  left: 0px;
  right: 0px;
  top: 0px;
  z-index: 9;
}
.tab-control {
  position: sticky;
  top: 44px;
  background-color: aliceblue;
}
.content {
  overflow: hidden;

  position: absolute;
  top: 43px;
  bottom: 49px;
  left: 0;
  right: 0;
}
</style>